<template>
  <div>
    <group title="选择分配模式">
      <radio title="type" v-model="mode" :options="modes"></radio>
    </group>
    <group title="操作" v-if="mode !== 'SG#'" >
      <cell :title="selectedMode.value" is-link value="设置" :link="mergeLink(selectedMode)" ></cell>
    </group>
    <!-- <panel header="模式说明" :list="list" :type="type"></panel> -->
  </div>
</template>

<script>
import Panel from 'vux/src/components/panel'
import Group from 'vux/src/components/group'
import Radio from 'vux/src/components/radio'
import Cell from 'vux/src/components/cell'

import { mapActions, mapState } from 'vuex'
import Q from 'q'

window.confirm = function (message) {
  var iframe = document.createElement("IFRAME")
  iframe.style.display = "none"
  iframe.setAttribute("src", 'data:text/plain,')
  document.documentElement.appendChild(iframe)
  var alertFrame = window.frames[0]
  var result = alertFrame.window.confirm(message)
  iframe.parentNode.removeChild(iframe)
  return result
}

export default {
  components: {
    Panel,
    Group,
    Radio,
    Cell
  },
  methods: {
    initDistributeConfig () {
      return Q.Promise((resolve, reject) => {
        this.getDistributeConfig(this.teamId)
          .then((response) => {
            if (response.data.errcode === 0) {
              const distributeConfig = response.data.results
              this.mode = distributeConfig.distribute_type
              this.initialMode = this.mode
              this.distributeConfig = distributeConfig
              this.init = true
              resolve()
            } else {
              resolve()
            }
          }).catch(() => {
            resolve()
          })
      })
    },
    // 合并链接
    mergeLink (node) {
      let link = node.link
      if (node.link) {
        const query = Object.assign({}, {type: this.mode, title: node.value, team_id: this.teamId}, node.link.query)
        link = Object.assign({}, node.link, {query: query})
      }
      return link
    },
    initialize () {
      this.initDistributeConfig()
      .finally(() => {
        this.$vux.loading.hide()
      }).catch(() => {
        this.$vux.loading.hide()
      })
    },
    ...mapActions({
      'getDistributeConfig': 'getDistributeConfig',
      'saveDistributeConfig': 'saveDistributeConfig'
    })
  },
  watch: {
    mode (value) {
      this.modes.forEach((elem, index) => {
        if (elem.key === this.mode) {
          this.selectedMode = elem
        }
      })
    },
    selectedMode (mode) {
      if (mode.key !== this.initialMode) {
        if (window.confirm('确定要修改分配方式吗？')) {
          this.distributeConfig.distribute_type = mode.key
          this.distributeConfig.team_id = this.teamId
          this.saveDistributeConfig(this.distributeConfig)
        } else {
          window.location.reload()
        }
      }
    },
    team () {
      if (!this.init) {
        this.initialize()
      }
    }
  },
  computed: {
    ...mapState({
      team: state => state.app.user.teams ? state.app.user.teams[0] : []
    })
  },
  mounted () {
    // this.mode = 'reassign-list'
    this.teamId = this.$route.query.team_id
    this.$vux.loading.show({ text: 'loading' })
    this.initialize()
    this.callJsApi('biz.navigation.setTitle', {title: '客户分配设置'})
  },
  data () {
    return {
      teamId: '',
      mode: '',
      initialMode: '',
      init: false,
      selectedMode: {},
      type: '1',
      distributeConfig: {},
      modes: [
        {
          key: 'QD#',
          value: '抢单模式',
          link: {name: 'reassign-list'}
        },
        // {
        //   key: 'AX#',
        //   value: '依次分配',
        //   link: {name: 'reassign-list', query: { 'is_allow_grab': 1 }}
        // },
        {
          key: 'YX#',
          value: '自动分配',
          link: {name: 'reassign-list', query: { 'is_allow_grab': 1 }}
        },
        {
          key: 'SG#',
          value: '仅手工分配',
          link: {name: 'reassign-list', query: { 'is_allow_grab': 1 }}
        }
      ],
      list: [{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        }
      }],
      footer: {
        title: '查看更多',
        url: 'http://vux.li'
      }
    }
  }
}
</script>
